<template>
  <div class="register-container">
    <div class="register-card">
      <div class="register-header">
        <h2>创建新账号</h2>
        <p>填写以下信息注册成为新用户</p>
      </div>
      <form class="register-form" @submit.prevent="handleRegister">
        <div class="form-group">
          <label for="username">用户名</label>
          <input
            id="username"
            type="text"
            v-model="username"
            placeholder="请输入您的用户名"
            required
            class="form-input"
          />
          <div v-if="errors.username" class="error-message">{{ errors.username }}</div>
        </div>
        
        <div class="form-group">
          <label for="email">电子邮箱</label>
          <input
            id="email"
            type="email"
            v-model="email"
            placeholder="请输入您的电子邮箱"
            required
            class="form-input"
          />
          <div v-if="errors.email" class="error-message">{{ errors.email }}</div>
        </div>
        
        <div class="form-group">
          <label for="password">密码</label>
          <input
            id="password"
            type="password"
            v-model="password"
            placeholder="请设置密码（至少8位）"
            required
            class="form-input"
          />
          <div class="password-strength" v-if="password.length > 0">
            <div class="strength-bar" :style="{ width: passwordStrength }"></div>
            <span class="strength-text">{{ passwordStrengthText }}</span>
          </div>
          <div v-if="errors.password" class="error-message">{{ errors.password }}</div>
        </div>
        
        <div class="form-group">
          <label for="confirmPassword">确认密码</label>
          <input
            id="confirmPassword"
            type="password"
            v-model="confirmPassword"
            placeholder="请再次输入密码"
            required
            class="form-input"
          />
          <div v-if="errors.confirmPassword" class="error-message">{{ errors.confirmPassword }}</div>
        </div>
        
        <div class="form-group terms-agreement">
          <label class="terms-checkbox">
            <input type="checkbox" v-model="agreeTerms" required />
            <span>
              我已阅读并同意 <a href="#" class="terms-link">服务条款</a> 和 <a href="#" class="terms-link">隐私政策</a>
            </span>
          </label>
          <div v-if="errors.agreeTerms" class="error-message">{{ errors.agreeTerms }}</div>
        </div>
        
        <button type="submit" class="register-button" :disabled="isSubmitting">
          {{ isSubmitting ? '注册中...' : '注册' }}
        </button>
        
        <div class="login-link-container">
          <span>已有账号？</span>
          <router-link to="/login" class="login-link">立即登录</router-link>
        </div>
        
        <div class="divider">
          <span>或者</span>
        </div>
        
        <div class="social-register">
          <button type="button" class="social-button google">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" fill="#4285F4"/>
              <path d="M12 15.5c-1.54 0-2.82-.8-3.5-1.8v4.3h6.97v-4.3c-.68 1-1.96 1.8-3.47 1.8z" fill="#34A853"/>
              <path d="M8.5 11.1v-1.2h7v1.2H8.5z" fill="#FBBC05"/>
              <path d="M12 8.8c1.18 0 2.22.4 2.94 1.17l1.87-1.86C15.87 6.5 13.98 6 12 6c-2.12 0-4 1-5.45 2.4l1.87 1.86C9.78 9.2 10.82 8.8 12 8.8z" fill="#EA4335"/>
              <path d="M1 11.75a29 29 0 0 0 .46 5.33 2.78 2.78 0 0 0 1.94 2c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.33 29 29 0 0 0-.46-5.25 2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75z" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>使用谷歌账号注册</span>
          </button>
          <button type="button" class="social-button wechat">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.2 7.2c.6-1.1.9-2.4.9-3.8C19.1 1.5 17.6 0 15.7 0h-7.5C6.4 0 4.9 1.5 4.9 3.4c0 1.4.3 2.7.9 3.8-.4.1-.8.2-1.2.4-1.6 1-2.5 2.9-2.5 5 0 2.1.9 4 2.5 5 .4.2.8.3 1.2.4 0 .8.1 1.6.2 2.3-.2.1-.5.1-.7.1h-.7c-.5 0-.9.4-.9.9s.4.9.9.9h.7c.2 0 .5 0 .7-.1.4.8 1 1.6 1.8 2.2.9.6 2 1 3 1h5.3c1 0 2.1-.4 3-1 .8-.6 1.4-1.4 1.8-2.2.2.1.5.1.7.1h.7c.5 0 .9-.4.9-.9s-.4-.9-.9-.9h-.7c-.2 0-.5 0-.7.1.1-.8.2-1.6.2-2.3.4-.1.8-.2 1.2-.4 1.6-1 2.5-2.9 2.5-5 0-2.1-.9-4-2.5-5-.4-.2-.8-.3-1.2-.4zM7.4 16.6c-1.3 0-2.4-1.1-2.4-2.4 0-1.3 1.1-2.4 2.4-2.4s2.4 1.1 2.4 2.4c0 1.3-1.1 2.4-2.4 2.4zm9.2 0c-1.3 0-2.4-1.1-2.4-2.4 0-1.3 1.1-2.4 2.4-2.4s2.4 1.1 2.4 2.4c0 1.3-1.1 2.4-2.4 2.4z" fill="#07C160"/>
            </svg>
            <span>使用微信账号注册</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { register as registerUser, saveRedirectUrl } from '../services/membershipService.js'

const router = useRouter()
const route = useRoute()
const username = ref('')
const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const agreeTerms = ref(false)
const isSubmitting = ref(false)

// 表单验证错误信息
const errors = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  agreeTerms: ''
})

// 监听密码变化，计算密码强度
const passwordStrength = computed(() => {
  if (password.value.length === 0) return '0%'
  if (password.value.length < 6) return '20%'
  
  let strength = 0
  // 检查是否包含数字
  if (/\d/.test(password.value)) strength += 25
  // 检查是否包含小写字母
  if (/[a-z]/.test(password.value)) strength += 25
  // 检查是否包含大写字母
  if (/[A-Z]/.test(password.value)) strength += 25
  // 检查是否包含特殊字符
  if (/[^A-Za-z0-9]/.test(password.value)) strength += 25
  
  return `${strength}%`
})

// 密码强度文本
const passwordStrengthText = computed(() => {
  const strength = parseInt(passwordStrength.value)
  if (strength <= 20) return '弱'
  if (strength <= 50) return '中'
  if (strength <= 75) return '强'
  return '非常强'
})

// 表单验证函数
const validateForm = () => {
  let isValid = true
  
  // 重置错误信息
  errors.value = {
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
    agreeTerms: ''
  }
  
  // 验证用户名
  if (!username.value.trim()) {
    errors.value.username = '用户名不能为空'
    isValid = false
  }
  
  // 验证邮箱
  if (!email.value.trim()) {
    errors.value.email = '邮箱不能为空'
    isValid = false
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
    errors.value.email = '请输入有效的邮箱地址'
    isValid = false
  }
  
  // 验证密码
  if (!password.value) {
    errors.value.password = '密码不能为空'
    isValid = false
  } else if (password.value.length < 8) {
    errors.value.password = '密码长度至少为8位'
    isValid = false
  }
  
  // 验证确认密码
  if (password.value !== confirmPassword.value) {
    errors.value.confirmPassword = '两次输入的密码不一致'
    isValid = false
  }
  
  // 验证是否同意条款
  if (!agreeTerms.value) {
    errors.value.agreeTerms = '请阅读并同意服务条款和隐私政策'
    isValid = false
  }
  
  return isValid
}

// 处理注册
const handleRegister = async () => {
  // 验证表单
  if (!validateForm()) {
    return
  }
  
  try {
    isSubmitting.value = true
    
    // 调用注册服务
    const result = registerUser(username.value, email.value, password.value)
    
    if (result.success) {
      // 根据返回的redirectUrl进行页面跳转
      router.push(result.redirectUrl)
    } else {
      // 注册失败，显示错误信息
      errors.value.email = result.error || '注册失败，请稍后再试'
    }
  } catch (error) {
    console.error('注册时发生错误:', error)
    errors.value.email = '注册时发生错误，请稍后再试'
  } finally {
    isSubmitting.value = false
  }
}

// 页面加载时，如果有redirect参数，保存它
if (route.query.redirect) {
  saveRedirectUrl(route.query.redirect)
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background-soft);
  padding: 2rem;
}

.register-card {
  background: var(--vt-c-white);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 2.5rem;
  width: 100%;
  max-width: 450px;
  transition: transform 0.3s ease;
}

.register-card:hover {
  transform: translateY(-5px);
}

.register-header {
  text-align: center;
  margin-bottom: 2rem;
}

.register-header h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.register-header p {
  color: var(--color-text);
  opacity: 0.8;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-input {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.error-message {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* 密码强度指示器 */
.password-strength {
  position: relative;
  height: 6px;
  background-color: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.strength-bar {
  height: 100%;
  background-color: #ff4757;
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* 根据密码强度改变颜色 */
.password-strength .strength-bar {
  background-color: #ff4757;
}

.password-strength .strength-bar[style*="50%"] {
  background-color: #ffa502;
}

.password-strength .strength-bar[style*="75%"] {
  background-color: #2ed573;
}

.password-strength .strength-bar[style*="100%"] {
  background-color: #1e90ff;
}

.strength-text {
  position: absolute;
  right: 0;
  bottom: -18px;
  font-size: 0.8rem;
  color: #666;
}

/* 服务条款 */
.terms-agreement {
  margin-top: 0.5rem;
}

.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

.terms-checkbox input {
  margin-top: 2px;
}

.terms-link {
  color: var(--color-primary);
  text-decoration: none;
}

.terms-link:hover {
  text-decoration: underline;
}

/* 注册按钮 */
.register-button {
  padding: 0.75rem;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.register-button:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
}

.register-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 登录链接 */
.login-link-container {
  text-align: center;
  margin-top: 1rem;
}

.login-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.login-link:hover {
  text-decoration: underline;
}

/* 分隔线 */
.divider {
  position: relative;
  height: 1px;
  background-color: var(--color-border);
  margin: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divider span {
  background-color: var(--vt-c-white);
  padding: 0 1rem;
  color: var(--color-text);
  font-size: 0.875rem;
}

/* 社交注册 */
.social-register {
  display: flex;
  gap: 1rem;
}

.social-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-button:hover {
  background-color: var(--color-background-soft);
  border-color: var(--color-primary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .register-container {
    padding: 1rem;
  }
  
  .register-card {
    padding: 1.5rem;
  }
  
  .social-register {
    flex-direction: column;
  }
}
</style>